$(function(){
    	  
    	$(".wrap>ul>li").mouseenter(function(){
    		$(this).children("ul").stop().slideDown(200);
    		$(this).css("background-color","#FFFFFF")
    		$(this).css("border-style","solid").css("border-top-width",0).css("border-width","1px").css("border-color","#CCCCCC")    		    		
    		$(this).children("ul").css("border-style","solid").css("border-width","1px").css("border-color","#CCCCCC").css("border-top-width",0)
    		$(this).children("a").children("div").css("background-position-y","-6px")
    		
    	})
    	
    	$(".wrap ul li").mouseleave(function(){
    		$(this).children("ul").stop().hide(200);
    		$(this).css("background-color","")
    		$(this).css("border-width",0)
    		$(this).children("a").children("div").css("background-position-y","0")
    		
    	})
    	
    	//获取节点信息
				var list = $("#ul");
				var ol = $("#ol");
				var li1 = $("#ul li");
				var li2 = $("#ol li");
				//复制第一张图到最后
				li1.first().clone(true).appendTo(list);
				//获取图片的数量
				var size = li1.length+1;
				//备用下标
				var s = 0
				//创建ol下面的li
				for(var i = 0; i < li1.length; i ++){
					$("<li>" + (i + 1) +"</li>").appendTo(ol);
				}
				//设置定时器。用作轮播时候的动画执行时间
				var timer = setInterval(function(){
					s ++;
					move()
				},2000)

				//动画函数（核心部分）
				function move(){
					
					//判断右边界
					if(s >= size){
						list.css({"left":"0"});
						s = 1
					}
					//判断左边界
					if (s < 0){
						//这里的1435可以动态用jq获取
						var k = li1.width()*-1 * (size-1) + "";
						list.css({"left":k});
						s = size-2; //即将移动到倒数第二个图
					}
					//运动
					//li1.width()*-1获取li的宽度
					var i = ( li1.width()*-1 ) * s
					list.stop().animate({"left":i});//停止之前绑定的动画

				//小按钮选中状态
				//
					var num = s == size ? 0 : s;
					console.log(num)
					
//					$("#ol li").eq(num-1).css({"background":"red","opacity":"0.5"}).siblings().css({"background":"#000","opacity":"0.3"});
					
					$("#ol li").eq(num-1).addClass("current").siblings().removeClass("current");
  
				}
				//小按钮(鼠标移上去会到相应的图)
				ol.on("mouseenter","li",function(){
					//这个地方要用时间绑定。不然不会出现效果，（ol下面的li初始状态下是没有的是后来创建的额）
					
					var _index = $(this).index();
					s = _index;
					move();
					console.log("移入ol下的li")
				})
				
				//移入screen停止动画
				$(".screen").mouseenter(function(){
					clearInterval(timer); 
				})
				//移出screen开始动画
				$(".screen").mouseleave(function(){
					timer = setInterval(function(){
						s++;
						move();
					}, 2000);
				})
				
				
     })
